<template lang="html">
  <div class='usercenter_side'>
      <div class='side_title_left'>
        系统设置
      </div>
      <el-menu :unique-opened="true" :default-active="default_active" class="everisk_menu_theme" :router="true" theme="dark">
      <template v-for="(link, index) in LINKS">
          <el-menu-item :index="link.lnk">
            <!-- <i class="el-icon-setting"></i> -->
            <span slot="title">{{link.text}}</span>
          </el-menu-item>
        </template>
    </el-menu>
  </div>

</template>
<script>
export default {
  data (){
    return {
      LINKS: [
        {
          lnk: "/systemconfig/usermanagement",
          text: "用户管理"
        },
        {
          lnk: "/systemconfig/IPwhitelist",
          text: "ip白名单"
        },
        {
          lnk: "/systemconfig/Builtinaccount",
          text: "内置雇主账号"
        }
      ],
      SIGNS: {

      },
      default_active: "/systemconfig/usermanagement"
    }
  },
  watch: {
    '$route': function(val){
      this.default_active = this.SIGNS[this.$router.currentRoute.fullPath] || this.$router.currentRoute.fullPath
    }
  },
  mounted (){
    this.default_active = this.SIGNS[this.$router.currentRoute.fullPath] || this.$router.currentRoute.fullPath
  }
}
</script>

<style lang="scss">
.usercenter_side {
  .everisk_menu_theme  {
    border: 0;
  }
  .el-menu-item:hover {
    color: #303133;
  }
  .is-active {
      color: #409eff!important;
      box-sizing: border-box;
      background: #f2f6fc;
       border-left: 4px solid #409eff!important;
    }
    .is-active:hover {
      color: #409eff;
    }
}
</style>
